<template>
	<view class="">
		<view class="sub-yue">
			<view class="sub-yue-top u-flex">
				<text>会员开台</text>
				<view class="right-icon">
					<u-icon @click="closeSubYue" name="close" color="#333333" size="18"></u-icon>
				</view>
			</view>

			<view class="pk-total">
				<view class="pk-price u-flex">
					<text>计费价格</text>
					<text>{{payDate.poolTablePrice}}元/小时</text>
				</view>
				<view class="pk-price-tips">
          每{{payDate.billingCfg.billingUnit}}分钟计费，最低消费{{payDate.poolTablePrice}}元
				</view>
				<view class="pk-price u-flex">
					<text>押金</text>
					<text>{{payDate.deposit}}元</text>
				</view>
			</view>
			<view class="sub-door-pay u-flex">
				<view class="door-tit">
					<view>
						优惠券
					</view>
					<view>
						优惠券在结算时抵扣
					</view>
				</view>
				<view class="door-adres u-flex" @click="showDoor=this.couponsList.length>0">
					<text>{{ticketVal}}</text>
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			<view class="vip-cz-area" v-if="czList && czList.length>0">
				<view class="cz-top u-flex">
					<image src="../../static/vip-cz-text.png" mode=""></image>
					<view class="cz-text">
						充值即成为会员，开台免押金
					</view>
				</view>
				<view class="cz-list u-flex">
					<view class="cz-item u-flex-col" :class="{'cz-item-act':czSelId===item.rechargeAmount}" @click="selCzType(item)" v-for="item in czList" :key="item.rechargeAmount">
						<view>
							充￥<text>{{item.rechargeAmount}}</text>
						</view>
						<view>
							送￥<text>{{item.giveAmount}}</text>
						</view>
						<image v-show="czSelId===item.rechargeAmount" src="../../static/sel-time-icon.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="sub-door-pay u-flex">
				<view class="door-tit">
					支付方式
				</view>
				<view class="door-adres u-flex" @click="showPayType=true">
					<text>{{payType.name}}</text><text v-show="payType.type===1">（余额：￥{{payDate.sumUserBalance}}元）</text>
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			<view class="check-area u-flex">
				<u-checkbox-group v-model="checked">
					<u-checkbox :checked="checked.length===1" shape="circle" activeColor="#FF7814" size="16"></u-checkbox>
				</u-checkbox-group>
				<view class="text-check">
					开台视为同意<text>《用户协议》</text>	及<text>《隐私政策》</text>
				</view>
			</view>
			<view class="sub-date-btm u-flex">
				<view class="">
					<view class="sub-date-btm-left u-flex" v-show="czSelId>0">
						<view class="left-price">
							<text>{{czSelId}}</text>元
						</view>
						<text>充值并使用会员开台，免押金。</text>
					</view>
          <view class="sub-date-vipPay" v-show="czSelId===0">
            <text>会员在结账时一次性支付</text>
          </view>
					<view class="tips-look u-flex" v-show="false">
						<text>查看明细</text>
						<u-icon name="arrow-up" color="#FF7814" size="10"></u-icon>
					</view>
				</view>
				<view class="sub-yue-btn" @click="toPlaying">
					立即开台
				</view>
			</view>
		</view>
    <u-picker :show="showDoor" keyName="dealName" :columns="couponsList" @cancel="showDoor=false" @confirm="selDoor"></u-picker>
	</view>
</template>

<script>
	export default {
		props:{
			notifyId:{
				type: String,
				default: "VIP_OPEN"
			},
			payDate:{
				type: Object,
				default:()=>({})
			},
      // 优惠券列表
      couponsList:{
        type: Array,
        default:()=>([])
      },
      czList:{
        type: Array,
        default:()=>([])
      },
		},
		data() {
			return {
				showSubYue:false, //开台弹窗
				selTypeId:1,//选择pk方式id
				payType:{type:1,name:'余额支付'},
				checked:[''],
        couponsItem:null,
				czSelId:0, //选择充值金额
        showDoor:false,
			}
		},
		onLoad(option) {},
		mounted() {
			this.selTypeId=this.notifyId;
			console.log(this.notifyId,'this.notifyId;')
		},
    computed:{
      ticketVal(){
        if (this.couponsItem != null) {
          return this.couponsItem.dealName;
        } else {
          return this.couponsList.length > 0 && this.couponsList[0].length > 1 ? "可用优惠券 " + (this.couponsList[0].length - 1) + " 张" : '暂无可用优惠券';
        }
      },
    },
		methods:{
			//关闭开台
			closeSubYue(){
				this.$emit('closeSubYue')
			},
			//选择优惠券信息
      selDoor(val) {
        this.showDoor = false
        if (val.value[0].id !== undefined) {
          this.couponsItem = val.value[0];
        } else {
          this.couponsItem = null;
        }
      },
			//选择支付金额
			selCzType(data){
				//再次点击时取消选择充值金额
        if(this.czSelId === data.rechargeAmount){
          this.czSelId=0;
          this.payType = {type:1,name:'余额支付'};
        }else {
          this.czSelId=data.rechargeAmount;
          this.payType = {type:'2',name:'微信支付'};
        }
			},
			toPlaying(){
        this.$emit("payOrder", {
          notifyId: this.notifyId,            //支付类型 VIP_OPEN->VIP开台
          payType: this.payType.type,         //支付方式 1：余额支付，2：微信支付
          rechargeMoney: this.czSelId,        //充值金额
          useCouponId: this.couponsItem?this.couponsItem.id:"",   //优惠券id
        });
				this.closeSubYue();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sub-yue{
		padding: 20rpx 0 0 0;
		background-color: #EDEDED;
		.sub-yue-top{
			padding: 0 26rpx;
			justify-content: center;
			position: relative;
			.right-icon{
				position: absolute;
				right: 26rpx;
			}
		}

		.pk-total{
			padding: 24rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx 26rpx;
			.pk-price{
				justify-content: space-between;
				text{
					font-size: 28rpx;
					color: #333333;
					&:nth-child(1){
						font-weight: 550;
					}
				}
			}
			.pk-price-tips{
				font-size: 22rpx;
				color: #666666;
				margin-bottom: 26rpx;
			}
		}
		.sub-date-btm{
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			border: 1rpx solid #EEEEEE;
			box-shadow: 0px 0px 19rpx 1rpx rgba(0,0,0,0.1);
			padding: 0 26rpx;
			justify-content: space-between;
			box-sizing: border-box;
			margin-top: 20rpx;
			.sub-date-btm-left{
				align-items: baseline;
				.left-price{
					font-size: 26rpx;
					font-weight: 550;
					color: #333333;
					margin-right: 20rpx;
					text{
						font-size: 40rpx;
						color: #FF7814;
						font-weight: 550;
					}
				}
				>text{
					font-size: 22rpx;
					font-family: PingFang SC;
					color: #999999;
				}
			}
			.sub-yue-btn{
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #FF7814;
				border-radius: 36rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
			}
			.tips-look{
				font-size: 22rpx;
				color: #FF7814;
				text{
					margin-right: 10rpx;
				}
			}
		}
		.sub-door-pay{
			justify-content: space-between;
			padding: 30rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 20rpx 26rpx 14rpx;
			.door-tit{
				font-size: 28rpx;
				font-weight: 550;
				color: #333333;
				>view{
					&:nth-child(2){
						font-size: 22rpx;
						font-weight: 400;
						color: #666666;
						margin-top: 4rpx;
					}
				}
			}
			.door-adres {
				font-size: 28rpx;
			}
		}
		.check-area{
			margin: 10rpx 26rpx 28rpx;
			.text-check{
				font-size: 24rpx;
				color: #999999;
				text{
					color: #263BDF;
				}
			}
		}
		.vip-cz-area{
			margin: 0 26rpx;
			padding:36rpx 26rpx;
			height: auto;
			background: url(https://qn.zqbond.com/wxmp/vip-cz-bg.png) no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;
			.cz-top{
				margin-bottom: 16rpx;
				image{
					width: 193rpx;
					height: 31rpx;
					margin-right: 10rpx;
				}
				.cz-text{
					font-size: 22rpx;
					color: #333333;
				}
			}
			.cz-list{
				flex-wrap: wrap;
				// justify-content: center;
				.cz-item{
					margin-top: 22rpx;
					margin-right: 20rpx;
					width: 202rpx;
					height: 110rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 3rpx solid #FFFFFF;
					justify-content: center;
					padding-left: 20rpx;
					box-sizing: border-box;
					&:nth-child(3n){
						margin-right: 0;
					}
					>view{
						&:nth-child(1){
							font-size: 22rpx;
							color: #88420F;
							text{
								font-size: 44rpx;
								font-weight: 550;
								color: #88420F;
							}
						}
						&:nth-child(2){
							font-size: 20rpx;
							color: #FF7814;
							text{
								font-size: 26rpx;
								font-weight: 550;
							}
						}
					}
				}
				.cz-item-act{
					border: 3rpx solid #FF7814;
					position: relative;
					image{
						width: 33rpx;
						height: 34rpx;
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
		}
	}

</style>
